<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资源中心</el-breadcrumb-item>
    </el-breadcrumb>


    <el-form :model="form1" inline style="margin-top: 20px">
      <el-form-item label="课程名:">
        <el-input v-model="form1.title" placeholder="请输入课程名"></el-input>
      </el-form-item>
      <el-form-item label="视频文件名:">
        <el-input v-model="form1.videoOriginalName" placeholder="请输入视频文件名"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="form1.status" placeholder="请选择状态">
          <el-option label="禁用" value="1">禁用</el-option>
          <el-option label="正常" value="0">正常</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否付费: ">
        <el-select v-model="form1.isFree" placeholder="请选择是否免费">
          <el-option label="付费" value="1">付费</el-option>
          <el-option label="免费" value="0" >免费</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit()">搜索</el-button>
        <el-button>添加</el-button>
      </el-form-item>
    </el-form>
    <el-drawer
      title="资源上传"
      placement="right"
      width="640"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <uploader></uploader>
    </el-drawer>



    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="title"  :show-overflow-tooltip="show"
        label="课程名称"
        width="190">
      </el-table-column>
      <el-table-column
        prop="chapterId"
        label="章节Id"
        width="90">
      </el-table-column>
      <el-table-column
        prop="videoUrl" :show-overflow-tooltip="show"
        width="180"
        label="视频存储路径">
      </el-table-column>
      <el-table-column
        width="180"  :show-overflow-tooltip="show"
        prop="videoOriginalName"
        label="视频文件名">
      </el-table-column>
      <el-table-column
        width="200"
        prop="playCount"
        label="播放次数(次)">
      </el-table-column>
      <el-table-column
        prop="isFree"
        label="是否免费">
        <template slot-scope="scope">
          <span v-if="scope.row.isFree===1">付费</span>
          <span v-if="scope.row.isFree===0">免费</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="duration"
        width="200"
        label="视频时长(s)">
      </el-table-column>
      <el-table-column
        prop="size"
        label="视频大小(kb)">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status==0"
            disabled>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        property="data"
        prop="createTime"
        width="180"
        label="上传时间">
      </el-table-column>
      <el-table-column
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="del(scope.$index, scope.row)">删除</el-button>
          <el-button
            size="mini"
            @click="playVideo(scope.$index, scope.row)">播放</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="total , prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>


    <el-dialog :modal="false" title="视频播放" :visible.sync="dialogVisible" width="40%">
      <p class="video_title">{{ videoName }}</p>
      <video :src="`${videoUrl}/${videoId}`" controls="controls" width="100%" @canplay="getVidDur()" id="myvideo"></video>
    </el-dialog>
  </div>
</template>

<script>
import {deleteVideo, getVideo1} from "../../api/video";
export default {
  data() {
    return {
      visible: false,
      dialogVisible4: true,
      dialogVisible: false,
      page:{},
      tableData:[],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0//总记录数
      },
      form1:{},
      show: true,
      videoId:'',
      videoName:'',
      videoUrl: 'http://127.0.0.1:8080/video/policemen'
    };
  },
  created() {
    this.getVideoList(1,10,this.form1)
  },
  methods: {
    onClose() {
      this.visible = false;
    },
    handleEdit(scope,row){
      this.visible = true;
      console.log(row)
    },
    getVideoList(currentPage,pageSize,form1){
      getVideo1(currentPage,pageSize,form1).then(req=>{
        console.log(req)
        this.tableData = req.data.data
        this.pagination.pageSize = req.data.page.size;
        this.pagination.total = req.data.page.total
      })
    },
    handleCurrentChange(currentPage){
      this.getVideoList(currentPage,this.pagination.pageSize,this.form1)
    },
    submit(){
      this.getVideoList(this.pagination.currentPage,this.pagination.pageSize,this.form1);
    },
    del(index,row){
      console.log(row.id)
      deleteVideo(row.id).then(result => {
      })
      this.getVideoList(this.pagination.currentPage,this.pagination.pageSize,this.form1)
    },
    getVidDur() {
      video();
    },
    playVideo(i, val) {
      console.log(val)
      //显示弹框
      this.dialogVisible = true;
      //保存视频名字
      this.videoName = val.title;
      //保存视频id
      this.videoId = val.id;
      console.log(i, val);
    },
  },
};

let video = () => {
  var videoTime = document.getElementById("myvideo");
  console.log(videoTime.duration); //获取视频时长
  console.log(videoTime.currentTime); //获取视频当前播放时间
};
</script>

<style  scoped>
</style>
